<template>
  <div id="magnifier">
    <!-- <div class="small-box" @mouseover="smallBoxOver" @mousemove="smallBoxMove"> -->
    <div class="small-box">
      <img :src="theImg" />
      <span class="hover"></span>
    </div>
    <div class="thumbnail-box">
      <!-- <a href="javascript:;" class="btn btn-prev" @click="prev"></a>
      <a href="javascript:;" class="btn btn-next" @click="next"></a>-->
      <a href="javascript:;" class="btn btn-prev"></a>
      <a href="javascript:;" class="btn btn-next"></a>
      <div class="list">
        <ul class="wrapper">
          <!-- <li class="item item-cur" v-for="(item, index) in pictureList" :key="index">
              <img :src="item.url" />
          </li>-->
          <!-- <li
              class="item"
              v-for="(item, index) in pictureList"
              :key="index"
              @mouseover="itemMouseOver"
          ></li>-->
          <li
            class="item"
            v-for="(item, index) in pictureList"
            :key="index"
            @mouseenter="chooseImg(item)"
          >
            <img :src="item.url" />
          </li>
        </ul>
      </div>
    </div>

    <!-- 缩略图容器 -->
    <div class="carousel" style="display:none;">
      <!-- 左箭头 -->
      <div class="left_arrow arrow" @click="leftArrowClick"></div>
      <!-- 缩略图展示盒子 -->
      <div class="show_box">
        <ul class="picture_container" ref="middlePicture">
          <li
            class="picture_item"
            @mouseover="tabPicture(item)"
            v-for="(item, index) in pictureList"
            :key="index"
          >
            <img :src="item.url" class="small_img" alt />
          </li>
        </ul>
      </div>
      <!-- 向右箭头 -->
      <div class="right_arrow arrow" @click="rightArrowClick"></div>
    </div>
    <div class="big-box">
      <img :src="theImg" />
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import jQuery from 'jquery'
import 'jquery'
import '../ProductPreview/fjd/magnifier'

export default {
  data() {
    return {
      theImg: '', // 当前选中的图片
      pictureList: [
        {
          url:
            'http://mp.ofweek.com/Upload/News/Img/member645/201711/17170046839337.jpg'
        },
        {
          url:
            'http://image.buy.ccb.com/merchant/201703/904919627/1522929521661_4.jpg'
        },
        {
          url:
            'http://image5.suning.cn/uimg/b2c/newcatentries/0070130691-000000000826244625_5_800x800.jpg'
        },
        {
          url:
            'http://img12.360buyimg.com/n5/s450x450_jfs/t9952/98/2269407420/279171/6137fe2f/59f28b2bN6959e086.jpg'
        },
        {
          url:
            'http://d.ifengimg.com/w600/p0.ifengimg.com/pmop/2017/1213/A4037864F6728F006B67AAEC51EC8A485F320FD2_size93_w1024_h734.jpeg'
        },
        {
          url:
            'http://d.ifengimg.com/w600/p0.ifengimg.com/pmop/2017/1213/A4037864F6728F006B67AAEC51EC8A485F320FD2_size93_w1024_h734.jpeg'
        }
      ]
      // $elem: '',
      // $smallBox: '',
      // $smallBox_pic: '',
      // $smallBox_mask: '',
      // $thumbnailBox: '',
      // $thumbnailBox_prev: '',
      // $thumbnailBox_next: '',
      // $thumbnailBox_wrapper: '',
      // $thumbnailBox_item: '',
      // $thumbnailBox_pic: '',
      // $bigBox: '',
      // $bigBox_pic: ''
    }
  },
  created() {
    this.theImg = this.pictureList[0].url
  },
  mounted() {},
  methods: {
    chooseImg(item) {
      this.theImg = item.url
    },
    // 切换图片
    tabPicture(item) {
      this.middleImg = item.url
    },
    // 点击左边箭头
    leftArrowClick() {
      if (this.middleLeft < 0) {
        // 每次向右平移一个图片盒子的宽度
        this.middleLeft += this.itemWidth
        $('.picture_container').animate(
          {
            left: this.middleLeft
          },
          500
        )
      }
    },
    // 点击右边箭头
    rightArrowClick() {
      // 每次向左平移一个盒子的宽度,最多移动的宽度为(图片数组长度-4)*每张缩略图的宽度
      if (this.middleLeft > -this.itemWidth * (this.pictureList.length - 4)) {
        this.middleLeft -= this.itemWidth
        $('.picture_container').animate(
          {
            left: this.middleLeft
          },
          500
        )
      }
      console.log(this.middleLeft)
    }
  }
}
</script>

<style lang="less" scoped>
.thumbnail-box .btn-prev {
  left: 0;
  background: url(../../assets/img/fjd/images/btn_prev.png) no-repeat;
}
.thumbnail-box .btn-next {
  right: 0;
  background: url(../../assets/img/fjd/images/btn_next.png) no-repeat;
}

ul,
li {
  list-style: none;
}

#magnifier {
  position: relative;
  width: 450px;
}
.small-box {
  position: relative;
  width: 450px;
  height: 450px;
  margin-bottom: 20px;
  border: 1px solid #eee;
}
.small-box img {
  display: block;
  object-fit: fill;
  width: 100%;
  height: 100%;
}
.small-box .hover {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
  border: 1px solid #aaa;
  background: #0099ff;
  opacity: 0.5;
  cursor: move;
}
.thumbnail-box {
  position: relative;
  width: 100%;
  height: 62px;
}
.thumbnail-box .btn {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 32px;
  margin-top: -16px;
}

.thumbnail-box .list {
  overflow: hidden;
  width: 390px;
  margin: 0 auto;
  height: 58px;
}
.thumbnail-box .wrapper {
  width: 100000px;
}
.thumbnail-box .list .item {
  float: left;
  margin: 0 11.9px;
}
.thumbnail-box .list .item-cur {
}
.thumbnail-box .list .item img {
  border: 2px solid #fff;
  height: 50px;
  width: 50px;
}
.thumbnail-box .list .item-cur img {
  border: 2px solid #e53e41;
}
.big-box {
  display: none;
  overflow: hidden;
  position: absolute;
  left: 451px;
  top: 0;
  width: 540px;
  height: 540px;
  border: 1px solid #e4e4e4;
  z-index: 999;
}
.big-box img {
  display: block;
}
</style>